<template>
  <div class="user-view">
    <spinner :show="loading"></spinner>
    <template v-if="bidList">
      <h1>标的 : {{ bidList.status }}</h1>
      <ul class="meta">
        <li><span class="label">message:</span> {{bidList.message }}</li>
      </ul>
      <button v-on:click="greet">更改标的</button>
      <transition-group tag="ul" name="item">
        <BidItem v-for="item in bidList.body.recommendedList" :key="item.bidId" :item="item">
        </BidItem>
      </transition-group>
    </template>
  </div>
</template>

<script>
import Spinner from '../components/Spinner.vue'
import BidItem from '../components/BidItem.vue'

function fetchData (store) {
  return store.dispatch('FETCH_BID_LIST', {
    bidId: ''
  })
}

export default {
  name: 'user-view',
  components: { 
    Spinner,
    BidItem
  },
  data(){
    const data={
      loading: false
    }
    return data
  },
  computed: {
    bidList () {
      return this.$store.state.bids
    }
  },
  preFetch: fetchData,
  beforeMount () {
    fetchData(this.$store)
  },
  methods: {
    greet: function () {
      this.loading = true;
      this.$store.dispatch('FETCH_BID', {
        bidId: '4528'
      }).then(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="stylus">
.user-view
  background-color #fff
  box-sizing border-box
  padding 2em 3em
  h1
    margin 0
    font-size 1.5em
  .meta
    list-style-type none
    padding 0
  .label
    display inline-block
    min-width 4em
  .about
    margin 1em 0
  .links a
    text-decoration underline
</style>
